<template>
  <section class="msite">    
    <HeaderTop :title="address.name">
      <router-link class="header_search" slot="left" to="/search">
        <i class="iconfont icon-sousuo"></i>
      </router-link>
      <router-link class="header_login" slot="right" :to="userInfo._id ? '/userInfo' : '/login'">
        <span class="header_login_text" v-if="!userInfo._id">登录|注册</span>
        <span class="header_login_text" v-else>
          <i class="iconfont icon-person"></i>
        </span>
        
      </router-link>
    </HeaderTop>
    <div class="miste-content-wrapper">
      <div class="miste-content">
        <nav class="msite_nav">
          <div class="swiper-container" v-if="categorys.length">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(categorys, index) in categorysArr" :key="index">
                <a href="javascript:;" class="link_to_food" v-for="(category, index) in categorys" :key="index">
                  <div class="food_container">
                    <img :src="baseImageUrl+category.image_url">
                  </div>
                  <span>{{category.title}}</span>
                </a>
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>
          <img src="./images/msite_back.svg" alt="" v-else>
        </nav>
        <div class="msite_shop_list">
          <div class="shop_header">
            <i class="iconfont icon-xuanxiang shop_icon"></i>
            <span class="shop_header_title">附近商家</span>
          </div>
          <ShopList></ShopList>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import {mapState} from 'vuex'
  import Swiper from 'swiper'
  import 'swiper/swiper-bundle.min.css'
  import BScroll from 'better-scroll'

  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import ShopList from '../../components/ShopList/ShopList'

  export default {
    name: 'MSite',
    data() {
      return {
        baseImageUrl: 'https://fuss10.elemecdn.com'
      }
    },
    computed: {
      ...mapState(['address', 'categorys', 'userInfo']),
      // address() {
      //   return this.$store.state.address
      // },
      /**
       * 根据 categorys 一维数组生成一个二维数组
       * 小数组中的元素个数最大是 8
       */ 
      categorysArr() {
        // 对象解构 - 取出 categorys
        const {categorys} = this
        // 准备一个空的二维数组
        const arr = []
        // 二维数组中的小数组（最大长度为 8）
        let minArr = []
        // 遍历 categorys
        categorys.forEach(c => {
          // 当前小数组满了，就创建新的
          if (minArr.length === 8) {
            minArr = []
          }
          if (minArr.length === 0) {
            // minArr 中为空时，就将 arr 与 minArr 关联起来
            // （指向同一个东西 - 与 C语言 不同）
            arr.push(minArr)
          }
          // 将当前分类保存到小数组中
          minArr.push(c)
        })
        return arr
      },
    },
    mounted() {
      this.$store.dispatch('getCategorys')      
      this.$store.dispatch('getShops')      
    },
    watch: {
      categorys (value) { // categorys 数组中有数据了,在异步更新界面之前执行
        // 使用 setTimeout 可以实现效果，但是不太好
        // setTimeout(() => {
        //   // 创建一个 Swiper 实例对象，实现轮播效果
        //   // 需要在数组数据显示之后才能创建
        //   new Swiper('.swiper-container', {
        //     loop: true, // 循环模式选项
        //     // 如果需要分页器
        //     pagination: {
        //       el: '.swiper-pagination',
        //     },
        //   })
        // }, 1000)

        // 希望界面更新完毕就立即创建 Swiper 对象
        this.$nextTick(() => { // 一旦完成界面更新，立即调用（此语句要写在数据更新之后）
          new Swiper('.swiper-container', {
            // loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
          })

          this.scroll = new BScroll('.miste-content-wrapper', {
            click: true
          })
        })
      }
    },
    components:{
      HeaderTop,
      ShopList,
    },
  }
</script>

<style lang="less">
  @import '../../common/less/mixins.less';
  .msite {
    width: 100%;
    .miste-content-wrapper {
      position: fixed;
      top: 45px;
      bottom: 46px;
      width: 100%;
      .msite_nav {
        .bottom-border-1px(@bc);
        margin-top: 15px;
        height: 200px;
        background: #fff;
        .swiper-container {
          width: 100%;
          height: 100%;
          .swiper-wrapper {
            width: 100%;
            height: 100%;
            .swiper-slide {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-items: flex-start;
              .link_to_food {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .food_container {
                  display: block;
                  width: 100%;
                  padding-bottom: 10px;
                  width: 50px;
                  height: 50px;
                  img {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                  }
                }
                span {
                  font-size: 13px;
                  color: #666;
                }
              }
            }
          }
          .swiper-pagination {
            >span.swiper-pagination-bullet-active {
              background: #02a774;
            }
          }
        }
      }
      .msite_shop_list {
        .top-border-1px(@bc);
        margin-top: 10px;
        background: #fff;
        .shop_header {
          padding: 10px 10px 0;
          .shop_icon {
            margin-left: 5px;
            color: #999;
          }
          .shop_header_title {
            color: #999;
            font-size: 14px;
            line-height: 20px;
          }
        }        
      }
    }
    
  }
</style>